<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

    <input type="file" id="file">
    <img src="" id="img" alt="">
    <button id="btn">上传</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script>
    // 声明一个formData容器 存储 key/v 数据 存储 "multipart/form-data"，它会使用和表单一样的格式。
    var formData = new FormData();
    $('#file').change(function(){
      var fd = new FileReader();
      fd.readAsDataURL(this.files[0]);
      // 容器中 放图片
      formData.append('file', this.files[0]);
      fd.onload = function(){
        $('#img').attr('src', this.result);
      }
    })

    $('#btn').click(function(){
      // 上传 判断 formData容器中是否有 file
      if(!formData.get('file')){
        // 没有选择文件 不允许上传
        alert('请选择文件');
        return false;
      }
      $.ajax({
        url: '/upload',
        type: 'post',
        processData: false, //必须 缓存关了
        contentType: false, //必须 jquery ajax上传文件格式默认是 urlencoded
        data: formData,
        success: function(res){
          if(res.code === 0) {
            alert(res.msg)
            history.go(0);
          }
        }
      })
    })
  </script>
</body>
</html>